<template>
  <el-container>
    <!-- 左侧组织树 -->
    <el-aside width="200px">
      <div
        class="ub cross-center"
        style="margin-left: 5px; font-size: 16px; margin-top: 5px"
      >
        <i class="el-icon-s-grid"></i>
        <span style="margin-left: 3px">组织机构</span>
      </div>
      <tree
        style="padding-left: 5px; padding-top: 5px"
        :nodes="nodes"
        :setting="setting"
        @onCreated="handleCreated"
      />
    </el-aside>
    <el-container>
      <el-main style="border-left: 1px solid #cccccc">
        <!-- 表头搜索框 -->
        <el-form
          :model="form"
          ref="form"
          :rules="rules"
          label-width="80px"
          size="normal"
        >
          <el-row :gutter="8">
            <el-col :span="10" :offset="0">
              <el-form-item label="部门名称" prop="departmentName">
                <el-input v-model="form.departmentName"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="10" :offset="0">
              <el-form-item label="部门电话">
                <el-input v-model="form.departmentTelephone"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="2" :offset="0">
              <el-button type="primary" size="default">查询</el-button>
            </el-col>
            <el-col :span="2" :offset="0">
              <el-button type="primary" size="default" @click="add"
                >新增</el-button
              >
            </el-col>
          </el-row>
        </el-form>

        <!-- 表格 -->
        <el-table
          :data="tableData"
          border
          style="width: 100%"
          :height="tableHeight"
          size="small"
        >
          <el-table-column fixed prop="date" label="日期" width="150">
          </el-table-column>
          <el-table-column prop="name" label="姓名" width="120">
          </el-table-column>
          <el-table-column prop="province" label="省份" width="120">
          </el-table-column>
          <el-table-column prop="city" label="市区" width="120">
          </el-table-column>
          <el-table-column prop="address" label="地址" width="300">
          </el-table-column>
          <el-table-column prop="zip" label="邮编" width="120">
          </el-table-column>
          <el-table-column fixed="right" label="操作" width="100">
            <template slot-scope="scope">
              <el-button @click="show(scope.row)" type="text" size="small"
                >查看</el-button
              >
              <el-button
                type="text"
                size="small"
                @click="edit(scope.index, scope.row)"
                >编辑</el-button
              >
            </template>
          </el-table-column>
        </el-table>

        <!-- 分页 -->
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage4"
          :page-sizes="[5, 10, 15, 20]"
          :page-size="5"
          layout="total, sizes, prev, pager, next, jumper"
          :total="tableData.length"
        >
        </el-pagination>

        <!-- 部门编辑 新增对话框 -->
        <el-dialog
          :title="dialogTitle"
          :visible.sync="dialogVisible"
          width="40%"
        >
          <el-form
            :model="dialogForm"
            ref="dialogform"
            label-width="80px"
            size="normal"
          >
            <el-row :gutter="20">
              <el-col :span="12" :offset="0">
                <el-form-item prop="parentName" label="上级部门">
                  <el-input
                    @click.native="selectDept"
                    v-model="dialogForm.parentName"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12" :offset="0">
                <el-form-item prop="name" label="部门名称">
                  <el-input v-model="dialogForm.name"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="12" :offset="0">
                <el-form-item label="部门编码">
                  <el-input v-model="dialogForm.deptCode"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12" :offset="0">
                <el-form-item label="序号">
                  <el-input-number
                    v-model="dialogForm.orderNum"
                  ></el-input-number>
                </el-form-item>
              </el-col>
            </el-row>
            <el-form-item label="部门电话">
              <el-input v-model="dialogForm.deptPhone"></el-input>
            </el-form-item>
            <el-form-item label="部门地址">
              <el-input v-model="dialogForm.deptAddress"></el-input>
            </el-form-item>
          </el-form>
          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="dialogVisible = false"
              >确 定</el-button
            >
          </span>
        </el-dialog>

        <!-- 上级部门选择对话框 -->
        <el-dialog
          title="上级部门"
          :visible.sync="parentDialogVisible"
          width="30%"
        >
          <tree
            @onCreated="parentCreated"
            :nodes="parentNodes"
            :setting="parentSetting"
          ></tree>
          <span slot="footer">
            <el-button @click="parentDialogVisible = false">取消</el-button>
            <el-button type="primary" @click="parentDialogVisible = false"
              >确定</el-button
            >
          </span>
        </el-dialog>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import tree from "vue-giant-tree";
export default {
  name: "DepartmentList",
  components: {
    tree,
  },
  data() {
    return {
      // 选择上级部门的对话框是否可见
      parentDialogVisible: false,
      parentZtreeObj: null,
      parentNodes: [], //上级部门树数据
      //上级部门树配置
      parentSetting: {
        view: {
          showLine: true,
          showIcon: false,
          fontCss: { "font-size": "12px", color: "#333" },
        },
        //设置这里会显示复选框
        // check: {
        //   enable: true
        // },
        data: {
          simpleData: {
            enable: true,
            idKey: "id",
            pIdKey: "pid",
            rootPId: "0",
          },
        },
        callback: {
          onClick: this.ztreeParentOnClick,
        },
      },
      // 新增和编辑的对话框
      dialogForm: {
        id: "",
        pid: "",
        parentName: "",
        name: "",
        deptCode: "",
        deptPhone: "",
        deptAddress: "",
        orderNum: "",
      },
      // 对话框显示属性
      dialogVisible: false,
      // 对话框标题
      dialogTitle: "部门新增",
      // 当前页码
      currentPage4: 1,
      //   表格高度
      tableHeight: window.innerHeight - 330,
      //   表格数据
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
          zip: 200333,
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1517 弄",
          zip: 200333,
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1519 弄",
          zip: 200333,
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1516 弄",
          zip: 200333,
        },
      ],
      form: {
        departmentName: "",
        departmentTelephone: "",
      },
      rules: {
        departmentName: [
          {
            required: true,
            message: "请输入部门名称",
            trigger: "change",
          },
        ],
      },
      ztreeObj: null,
      setting: {
        view: {
          //是否显示节点之间的连线
          showLine: true,
          //是否显示节点的图标
          showIcon: false,
          //个性化文字样式
          fontCss: { "font-size": "12px", color: "#333" },
        },
        //设置这里会显示复选框
        // check: {
        //   enable: true
        // },
        data: {
          //ztree数据模式配置
          simpleData: {
            // 使用 / 不使用 简单数据模式
            enable: true,
            idKey: "id",
            pIdKey: "pid",
            rootPId: "0",
          },
        },
        //回调函数配置
        callback: {
          //；配置树的点击事件
          onClick: this.ztreeOnClick,
        },
      },
      nodes: [
        {
          id: "1000000362292826",
          pid: "1000001251633881",
          likeId: "0,100000177618509910000012516338811000000362292826",
          parentName: "销售部门",
          manager: null,
          name: "销售1",
          deptCode: "",
          deptAddress: "",
          deptPhone: "",
          orderNum: 0,
        },
        {
          id: "1000001251633881",
          pid: "1000001776185099",
          likeId: "0,10000017761850991000001251633881",
          parentName: "秘咖科技有限公司",
          manager: null,
          name: "销售部门",
          deptCode: null,
          deptAddress: null,
          deptPhone: null,
          orderNum: null,
        },
        {
          id: "1000001341234088",
          pid: "1000001776185099",
          likeId: "0,1000001776185099",
          parentName: "秘咖网络科技有限公司",
          manager: null,
          name: "人才管理部1",
          deptCode: "RCGL",
          deptAddress: "",
          deptPhone: "",
          orderNum: 0,
        },
        {
          id: "1000001620535597",
          pid: "1000001776185099",
          likeId: "0,10000017761850991000001620535597",
          parentName: "秘咖网络科技有限公司",
          manager: null,
          name: "软件研发部",
          deptCode: null,
          deptAddress: null,
          deptPhone: null,
          orderNum: null,
        },
        {
          id: "1000001776185099",
          pid: "0",
          likeId: "0,1000001776185099",
          parentName: "顶级部门",
          manager: null,
          name: "秘咖网络科技有限公司",
          deptCode: null,
          deptAddress: null,
          deptPhone: null,
          orderNum: null,
        },
        {
          id: "1000002097176073",
          pid: "1000001776185099",
          likeId: "0,10000017761850991000002097176073",
          parentName: "秘咖网络科技有限公司",
          manager: "464156",
          name: "售后服务部",
          deptCode: "SHFWB",
          deptAddress: "昆明",
          deptPhone: "18687171906",
          orderNum: null,
        },
      ],
    };
  },
  methods: {
    // 点击上级部门目录树节点时，将上级部门赋值给变量
    ztreeParentOnClick(event, treeId, treeNode){
      this.dialogForm.parentName=treeNode.name;

    },
    //   创建父级节点对话框时的回调函数
    parentCreated(treeObj) {
      this.parentZtreeObj = treeObj;
      treeObj.expandAll(true);
    },
    //   新增和编辑部门的选择上级部门的事件
    selectDept() {
      // 点击时电视父级节点选择的对话框
      this.parentDialogVisible = true;
      this.parentNodes = [
        {
          id: "0",
          pid: "-1",
          likeId: "0,",
          parentName: null,
          manager: null,
          name: "顶级部门",
          deptCode: null,
          deptAddress: null,
          deptPhone: null,
          orderNum: null,
        },
        {
          id: "1000000362292826",
          pid: "1000001251633881",
          likeId: "0,100000177618509910000012516338811000000362292826",
          parentName: "销售部门",
          manager: null,
          name: "销售1",
          deptCode: "",
          deptAddress: "",
          deptPhone: "",
          orderNum: 0,
        },
        {
          id: "1000001251633881",
          pid: "1000001776185099",
          likeId: "0,10000017761850991000001251633881",
          parentName: "秘咖科技有限公司",
          manager: null,
          name: "销售部门",
          deptCode: null,
          deptAddress: null,
          deptPhone: null,
          orderNum: null,
        },
        {
          id: "1000001341234088",
          pid: "1000001776185099",
          likeId: "0,1000001776185099",
          parentName: "秘咖网络科技有限公司",
          manager: null,
          name: "人才管理部1",
          deptCode: "RCGL",
          deptAddress: "",
          deptPhone: "",
          orderNum: 0,
        },
        {
          id: "1000001620535597",
          pid: "1000001776185099",
          likeId: "0,10000017761850991000001620535597",
          parentName: "秘咖网络科技有限公司",
          manager: null,
          name: "软件研发部",
          deptCode: null,
          deptAddress: null,
          deptPhone: null,
          orderNum: null,
        },
        {
          id: "1000001776185099",
          pid: "0",
          likeId: "0,1000001776185099",
          parentName: "顶级部门",
          manager: null,
          name: "秘咖网络科技有限公司",
          deptCode: null,
          deptAddress: null,
          deptPhone: null,
          orderNum: null,
        },
        {
          id: "1000002097176073",
          pid: "1000001776185099",
          likeId: "0,10000017761850991000002097176073",
          parentName: "秘咖网络科技有限公司",
          manager: "464156",
          name: "售后服务部",
          deptCode: "SHFWB",
          deptAddress: "昆明",
          deptPhone: "18687171906",
          orderNum: null,
        },
      ];
      console.log("here");
    },
    //   新增和编辑部门对话框的提交按钮
    onSubmit() {},
    // 新增部门按钮
    add() {
      this.dialogVisible = true;
      this.dialogTitle = "新增部门";
    },
    //   点击表格的编辑按钮
    edit(index, row) {
      this.dialogVisible = true;
      this.dialogTitle = "编辑部门";
      console.log(row);
    },
    // 点击表格的查看按钮
    show(row) {
      console.log(row);
    },
    handleSizeChange() {},
    handleCurrentChange() {},
    handleCreated(treeObj) {
      this.ztreeObj = treeObj;
      //设置展开
      treeObj.expandAll(true);
    },
  },
  mounted() {
    this.$nextTick(() => {
      this.tableHeight = window.innerHeight - 330; //后面的50：根据需求空出的高度，自行调整
    });
  },
};
</script>

<style scoped>
.el-aside {
}
.el-main {
  padding-top: 5px !important;
  padding-bottom: 5px !important;
}
</style>